import 'package:flutter/material.dart';
import 'package:getwidget/getwidget.dart';
import 'package:meal/constant/sizes.dart';
import 'package:meal/utils/colors.dart';
import 'package:meal/utils/styles.dart';
import 'package:meal/utils/tools.dart';

///
/// 绑定手机号
///
///
class MobileBind extends StatefulWidget {
  const MobileBind({Key? key}) : super(key: key);

  @override
  State<MobileBind> createState() => _MobileBindState();
}

class _MobileBindState extends State<MobileBind> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: ToolsUtils.getDefaultBrnAppBar('绑定手机'),
      body: SingleChildScrollView(
        child: Container(
          decoration: const BoxDecoration(color: Colors.white),
          margin: const EdgeInsets.only(bottom: Sizes.default30),
          padding: const EdgeInsets.symmetric(horizontal: Sizes.default20),
          child: Column(
            children: [
              Container(
                margin: const EdgeInsets.only(top: Sizes.default20),
                alignment: Alignment.centerLeft,
                child: Text('更换手机号',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color363, fontSize: Sizes.default30)),
              ),
              Container(
                alignment: Alignment.centerLeft,
                child: Text('请输入新手机号，作为登录帐号',
                    style: StylesUtils.customTextStyle(
                        color: ColorsUtils.color999, fontSize: Sizes.default13)),
              ),
              Container(
                margin: const EdgeInsets.only(top: Sizes.default20),
                alignment: Alignment.centerLeft,
                child: Row(
                  children: [
                    Container(
                      width: Sizes.default60,
                      alignment: Alignment.centerLeft,
                      child: Text('手机号',
                          style: StylesUtils.customTextStyle(
                              fontSize: Sizes.default15, color: ColorsUtils.color363)),
                    ),
                    Expanded(
                        child: Row(
                      children: [
                        Text.rich(TextSpan(
                            text: '+86',
                            style: StylesUtils.customTextStyle(
                                fontSize: Sizes.default16, color: ColorsUtils.color363))),
                        Expanded(
                            child: Container(
                          margin: const EdgeInsets.only(left: Sizes.default10),
                          child: TextField(
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color363, fontSize: Sizes.default16),
                            decoration: InputDecoration(
                                border: const OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                ),
                                isCollapsed: true,
                                filled: true,
                                fillColor: ColorsUtils.rgba(255, 255, 255),
                                contentPadding: const EdgeInsets.symmetric(
                                    horizontal: Sizes.default10, vertical: Sizes.default10),
                                constraints: const BoxConstraints(minHeight: 40),
                                hintText: '请输入手机号',
                                hintStyle: StylesUtils.customTextStyle(
                                    fontSize: Sizes.default15, color: ColorsUtils.colorCcc)),
                            keyboardType: TextInputType.phone,
                            onChanged: (String content) {},
                          ),
                        ))
                      ],
                    ))
                  ],
                ),
              ),
              Container(
                margin: const EdgeInsets.only(top: Sizes.default20),
                alignment: Alignment.centerLeft,
                child: Row(
                  children: [
                    Container(
                      width: Sizes.default60,
                      alignment: Alignment.centerLeft,
                      child: Text('验证码',
                          style: StylesUtils.customTextStyle(
                              fontSize: Sizes.default15, color: ColorsUtils.color363)),
                    ),
                    Expanded(
                        child: Row(
                      children: [
                        Expanded(
                            child: Container(
                              margin: const EdgeInsets.only(right: Sizes.default10),
                              child: TextField(
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color363, fontSize: Sizes.default16),
                                decoration: InputDecoration(
                                    border: const OutlineInputBorder(
                                      borderSide: BorderSide.none,
                                    ),
                                    isCollapsed: true,
                                    filled: true,
                                    fillColor: ColorsUtils.rgba(255, 255, 255),
                                    contentPadding: const EdgeInsets.symmetric(
                                        horizontal: Sizes.default10, vertical: Sizes.default10),
                                    constraints: const BoxConstraints(minHeight: 40),
                                    hintText: '请输入验证码',
                                    hintStyle: StylesUtils.customTextStyle(
                                        fontSize: Sizes.default15, color: ColorsUtils.colorCcc)),
                                keyboardType: TextInputType.phone,
                                onChanged: (String content) {},
                              ),
                            )
                        ),
                        Container(
                          width: 100,
                          height: Sizes.default40,
                          decoration: BoxDecoration(
                              border: Border.all(color: ColorsUtils.rgba(255, 110, 83, 1)),
                              borderRadius: const BorderRadius.all(Radius.circular(20))),
                          alignment: Alignment.center,
                          child: Text(
                            '获取验证码',
                            textAlign: TextAlign.center,
                            style: StylesUtils.customTextStyle(color: ColorsUtils.colorFf6),
                          ),
                        )
                      ],
                    )),
                  ],
                ),
              ),
              Container(
                width: double.maxFinite,
                margin: const EdgeInsets.only(top: Sizes.default30),
                child: GFButton(
                    onPressed: () {},
                    text: '确定',
                    textStyle: StylesUtils.customTextStyle(fontSize: Sizes.default16),
                    shape: GFButtonShape.pills,
                    type: GFButtonType.solid,
                    size: GFSize.LARGE,
                    color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorFf6)),
              )
            ],
          ),
        ),
      ),
    );
  }
}
